/** @type {import('tailwindcss').Config} */
const sizeKeys = ['width', 'minWidth', 'maxWidth', 'height', 'minHeight', 'maxHeight'];
// const layoutKeys = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
const loop100 = () => {
  const extend = {};
  for (let i = 0; i <= 100; i++) {
    sizeKeys.forEach((key) => {
      if (!extend[key]) extend[key] = {};
      extend[key][`${i}%`] = `${i}%`;
    });
    // layoutKeys.forEach((key) => {
    //   if (!extend[key]) extend[key] = {};
    //   extend[key][`${i}%`] = `${i}%`;
    // });
  }
  return extend;
};
const loop1000 = () => {
  const extend = {};
  for (let i = 0; i <= 1000; i++) {
    sizeKeys.forEach((key) => {
      if (!extend[key]) extend[key] = {};
      extend[key][`${i}px`] = `${i}px`;
    });
    // layoutKeys.forEach((key) => {
    //   if (!extend[key]) extend[key] = {};
    //   extend[key][`${i}px`] = `${i}px`;
    // });
  }
  return extend;
};
const percentage = loop100();
const size = loop1000();
Object.keys(percentage).forEach((key) => {
  Object.assign(size[key], percentage[key]);
});
// console.log(size);
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  prefix: 'tw-',
  theme: {
    extend: {
      colors: {
        primary: '#0d6fd1',
        secondary: '#6aada7',
        accent: '#bc33d4',
        dark: '#1d1d1d',
        'dark-page': '#262323',
        positive: '#1eba74',
        negative: '#d90b23',
        info: '#269db5',
        warning: '#bf9a34',
      },
      ...size,
    },
  },
  plugins: [],
};
